<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .list li:first-child {
            background-color: #f2f2f2;
        }

        .list li:last-child {
            background-color: #29cf53;
        }

        .list li:nth-child(4) {
            background-color: #fc2121;
        }

        ////偶数标签
        .list2 li:nth-child(2n) {
            background-color: #531fcd;
        }

        //奇数标签
        .list2 li:nth-child(2n+1) {
            background-color: #184cac;
        }

        //5的倍数
        .list2 li:nth-child(5n){
            background-color: #ff2f;
        }

        //第五个元素以后
        .list2 li:nth-child(n+5){
            background-color: #ab34c0;
        }

        //第五个元素之前
        .list2 li:nth-child(-n+5){
            background-color: #4cbc80;
        }

    </style>
</head>
<body>
<ul class="list">
    <li>B1</li>
    <li>B2</li>
    <li>b3</li>
    <li>b4</li>
    <li>b5</li>
    <li>b6</li>
    <li>b7</li>
</ul>

<ul class="list2">
    <li>b1</li>
    <li>b2</li>
    <li>b3</li>
    <li>b4</li>
    <li>b5</li>
    <li>b6</li>
    <li>b7</li>
    <li>b8</li>
    <li>b9</li>
    <li>b10</li>
</ul>
</body>
</html>